<template>
  <!-- 红包雨等待 -->
  <div class="wait">
    <img src="https://static.hudongmiao.com/joymewH5/img/hby/hbyTitle.png" class="hbyTitle" />
    <div class="circle">
      <img src="https://static.hudongmiao.com/joymewH5/img/hby/lightCircle.png" class="outerCircle" />
      <img src="https://static.hudongmiao.com/joymewH5/img/hby/lightCircleInner.png" class="innerCircle" />
      <img src="https://static.hudongmiao.com/joymewH5/img/hby/shakeMobile.png" class="shakeMobile shakeAni" />
    </div>
    <img src="https://static.hudongmiao.com/joymewH5/img/hby/coin.png" class="coin" />
    <img src="https://static.hudongmiao.com/joymewH5/img/hby/bendHb1.png" class="bendHb1" />
    <img src="https://static.hudongmiao.com/joymewH5/img/hby/bendHb2.png" class="bendHb2" />
    <img src="https://static.hudongmiao.com/joymewH5/img/hby/bendHb3.png" class="bendHb3" />
  </div>
</template>
<script>
export default {
  name: 'hbyWait',
  created() {
  },
  mounted() {},
  beforeCreated() {},
};
</script>
<style lang="less" scoped>
.wait {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://static.hudongmiao.com/joymewH5/img/hby/bg.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .hbyTitle {
    margin-top: 215px;
    width: 546px;
    height: 216px;
  }
  .circle {
    width: 517px;
    height: 479px;
    position: relative;
    margin-top: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    .outerCircle {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .innerCircle {
      position: absolute;
      width: 440px;
      height: 441px;
    }
    .shakeMobile {
      position: absolute;
      width: 283px;
      height: 319px;
    }
  }
  .coin {
    width: 137px;
    height: 138px;
    position: absolute;
    top: 591px;
    right: 8px;
  }
  .bendHb1 {
    width: 148px;
    height: 111px;
    position: absolute;
    top: 610px;
    left: -2px;
  }
  .bendHb2 {
    width: 128px;
    height: 83px;
    position: absolute;
    top: 941px;
    left: 62px;
  }
  .bendHb3 {
    width: 128px;
    height: 83px;
    position: absolute;
    top: 747px;
    right: 13px;
  }
  .shakeAni {
    animation-name: shakeAni;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }
  @keyframes shakeAni {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(25deg);
    }
    60% {
      transform: rotate(-25deg);
    }
    70% {
      transform: rotate(25deg);
    }
    80% {
      transform: rotate(-25deg);
    }
    90% {
      transform: rotate(25deg);
    }
    100% {
      transform: rotate(-25deg);
    }
  }
}
</style>
